import React, { useEffect, useState, useCallback } from 'react'
import { InfiniteScroll, DotLoading } from 'antd-mobile'

const InfiniteScrollContent = ({ hasMore }) => {
    return (
        <>
            {hasMore ? (
                <>
                    <span>Loading</span>
                    <DotLoading />
                </>
            ) : (
                <span>--- 我是有底线的 ---</span>
            )}
        </>
    )
}


const Index = (props) => {
    const { hasMore, getRequest } = props
    

    const loadMore = useCallback(() => {
        getRequest()
    })

    return (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
            <InfiniteScrollContent hasMore={hasMore} />
        </InfiniteScroll>
    );
}

export default Index;
